<!--
 * @Author: 刘十三
 * @Date: 2024-01-04 15:13:21
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-02-23 16:58:18
 * @FilePath: \NM-dev-1.3.1\dev\pages\internal\linkage\todo\infomationTaskSet.vue
 * @Description:内蒙多员联动 - 延期办理申请（列表）
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="content">
      <u-collapse :accordion="false" class="collapse-item-line" ref="collapseRef">
        <u-collapse-item @change="handleInitHeight" title="反馈信息">
          <infomationBaseInfo :info="form" />
        </u-collapse-item>
        <u-collapse-item @change="handleInitHeight" title="延期信息" :open="true" :disabled="true" class="none">
          <u-form class="u-form-m" :model="approveForm" :error-type="['border-bottom', 'toast']" label-width="auto" label-position="top" ref="uForm">
            <u-form-item label="申请延期天数" prop="termDay" :required="this.formAll.step == 'edit' && isStatus == 0">
              <u-number-box v-model="approveForm.termDay" :min="0" :max="999" input-width="100" :disabled="isStatus != 0" v-if="isStatus == 0"></u-number-box>
              <span style="font-size: 16px;color: #393B3D;" v-else>{{ approveForm.termDay }}天</span>
            </u-form-item>
            <u-form-item label="申请理由" prop="reason" :required="this.formAll.step == 'edit' && isStatus == 0">
              <u-input placeholder="请输入" v-model="approveForm.reason" type="textarea" height="100" :auto-height="true" maxlength="300" :disabled="isStatus != 0" />
            </u-form-item>
            <u-form-item label="附件" :border-bottom="isStatus == 1 ? true : false">
              <view v-if="isStatus != 0 && this.formAll.step == 'view' && fileList.length == 0">
                <u-icon name="attach" color="#2979ff" size="28"></u-icon>
                <span style="font-size: 16px;color: #393B3D;">未上传</span>
              </view>
              <view style="margin-left:-5px">
                <m-upload :deletable="isStatus == 0" :disabled="isStatus != 0" :maxCount="picIds" width="150rpx" height="150rpx" :file-list="fileList" :multiple="true" index="otherFileList" :uploadParam="{ fiGroupCode: $FILE_GROUP_TYPE.l_diversification_attr, bizId: bizUuid }" upApiUrl="uploadBase64ForApp" ref="otherFileUpload" @on-list-change="handleUpdate" />
              </view>
            </u-form-item>
            <!-- 审批时显示 -->
            <u-form-item label="审批结果" prop="applyResult" :required="this.formAll.step == 'edit' && isStatus == 1" v-if="isStatus == 1 && approveForm.applyResult != 99" :border-bottom="false">
              <u-radio-group v-model="approveForm.applyResult">
                <u-radio name="0">
                  不通过
                </u-radio>
                <u-radio name="1">
                  通过
                </u-radio>
              </u-radio-group>
            </u-form-item>
            <u-form-item label="审批结果" prop="applyResult" v-if="isStatus == 1 && approveForm.applyResult == 99" :border-bottom="false">
              <span style="font-size: 16px;color: #393B3D;">
                审批中
              </span>
            </u-form-item>
          </u-form>
        </u-collapse-item>
      </u-collapse>
      <!-- 按钮 -->
    </view>
    <view class="submit-btns btn-other-cls">
      <u-row gutter="25" style="width: 100%">
        <u-col :span="this.isStatus == 2 ? 12 : 6">
          <u-button :plain="this.isStatus == 2 ? false : true" type="primary" @click="handleGoDetail">
            任务详情
          </u-button>
        </u-col>
        <u-col span="6">
          <u-button type="primary" @click="saveOrSubmit" v-if="this.formAll.step == 'edit' && isStatus == 0">
            提交
          </u-button>
          <u-button type="primary" @click="checkSaveOrApproval" v-if="this.formAll.step == 'edit' && isStatus == 1">
            审批
          </u-button>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
const approvalStatusOptions = {
  "01": "草稿",
  "02": "审批中",
  "03": "审批结束",
};
import mUpload from "@/components/m-upload.vue";
import { uuid } from "@/common/util.js";
import commonService from "@/service/common/common.service";
import infomationBaseInfo from "./components/infomationBaseInfo.vue";
import linkageService from "@/service/internal/linkeage.service";
export default {
  components: { infomationBaseInfo, mUpload },
  data() {
    return {
      picIds: 10,
      bizUuid: "",
      form: {},
      formAll: {},
      approveForm: {
        termDay: 1,
        applyResult: "0",
        reason: "",
      },
      nextPersonUuid: "",
      fileList: [],
      approvalStatusOptions,
      rules: {
        applyResult: [
          {
            required: true,
            message: "请选择审批结果",
            trigger: ["blur", "change"],
          },
        ],
        reason: [
          {
            required: true,
            message: "请输入申请理由，300字以内",
            trigger: ["blur", "change"],
          },
        ],
      },
      processDefKey: "taskDelayApply",
      isStatus: 3, // 默认是0：新建 （从待办进来获取不到这个字段，1：待办未完成，2：待办已完成 & 查看）
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad() {
    let preParam = this.getRouteParam();
    this.bizUuid = preParam.bizUuid || uuid();
    this.taskId = preParam.taskId || ""; // 只有新建有
    this.getDetail(preParam);
  },
  methods: {
    getDetail(pageParam) {
      let self = this;
      let param = {};
      if (pageParam.isStatus == "add") {
        param = {
          taskId: pageParam.taskId,
        };
      } else {
        param = {
          deLayApplyId: pageParam.bizUuid,
        };
      }
      self.$modal.showLoading("数据加载中...");
      linkageService
        .getTaskDelayApplyDetail(param)
        .then((res) => {
          self.$modal.hideLoading();
          if (res.success && res.bean) {
            self.formAll = res.bean;
            self.form = res.bean.taskVo;
            self.approveForm.termDay = res.bean.termDay ? Number(res.bean.termDay) : 1;
            self.approveForm.approvalStatusName = self.approvalStatusOptions[res.bean.taskVo.approvalStatus];
            self.approveForm.reason = res.bean.reason;
            // 新建可以传进来 isStatus 审批和从待办进来 传不了
            if (pageParam.isStatus == "add") {
              this.isStatus = 0;
            } else if (pageParam.isStatus == "view") {
              this.isStatus = 2;
            } else {
              // 从待办跳进来的
              //  审批
              if (res.bean.step == "edit") {
                this.isStatus = 1;
              }
              // 查看
              if (res.bean.step == "view") {
                this.isStatus = 2;
                if (res.bean.hasOwnProperty("applyResult")) {
                  self.approveForm.applyResult = res.bean.applyResult;
                } else {
                  self.approveForm.applyResult = 99; // 前端自己定义
                }
              }
            }
            this.getFileList();
          } else {
            self.$u.toast(res.msg);
          }
        })
        .catch((err) => {
          self.$modal.hideLoading();
        });
    },
    getFileList() {
      commonService.goFiles(this.bizUuid, this.$FILE_GROUP_TYPE.l_diversification_attr).then((rs) => {
        if (rs.success) {
          this.handleInitHeight({ show: true });
          if (rs.data.length > 0) {
            rs.data.forEach((item) => {
              this.fileList.push({ fileId: item.gfiId, gfiId: item.gfiId });
            });
          }
        } else {
          this.$u.toast(rs.msg);
        }
      });
    },
    handleInitHeight(param) {
      if (param.show) {
        this.$nextTick(() => {
          this.$refs.collapseRef.init();
        });
      }
    },
    updateBackState(param) {
      let self = this;
      if (param.flowUserSelectBack) {
        self.nextPersonUuid = param.flowUserSelectBack;
        if (self.isStatus == 0) {
          self.saveOrSubmit();
        }
        if (self.isStatus == 1) {
          self.saveOrApproval();
        }
      }
    },
    saveOrSubmit() {
      let self = this;
      self.$refs.uForm.validate((valid) => {
        if (valid) {
          if (self.nextPersonUuid) {
            let param = {
              termDay: self.approveForm.termDay,
              reason: self.approveForm.reason,
              taskId: self.taskId,
              deLayApplyId: self.bizUuid,
              nextPersonUuid: self.nextPersonUuid,
            };
            self.$modal.showLoading("加载中...");
            linkageService
              .saveTaskDelayApply(param)
              .then((res) => {
                self.$modal.hideLoading();
                if (res.success) {
                  self.$u.toast("提交成功");
                  self.backPrev({
                    paramKey: "refresh",
                    param: true,
                  });
                } else {
                  self.$u.toast(res.msg);
                }
              })
              .catch((err) => {
                self.$modal.hideLoading();
              });
          } else {
            self.hasChoosePeople();
          }
        }
      });
    },
    saveOrApproval() {
      let self = this;
      self.$modal.showLoading("加载中...");
      let param = {
        deLayApplyId: self.bizUuid,
        approvalComment: "同意",
        applyResult: self.approveForm.applyResult ? Number(self.approveForm.applyResult) : 0,
        nextPersonUuid: self.nextPersonUuid,
      };
      linkageService
        .delayApprovalNext(param)
        .then((res) => {
          self.$modal.hideLoading();
          if (res.success) {
            self.$u.toast("审批成功");
            self.backPrev({
              paramKey: "refresh",
              param: true,
            });
          } else {
            self.$u.toast(res.msg);
          }
        })
        .catch((err) => {
          self.$modal.hideLoading();
        });
    },
    checkSaveOrApproval() {
      let self = this;
      self.$refs.uForm.validate((valid) => {
        if (valid) {
          let data = {
            bizId: self.bizUuid,
            processDefKey: self.processDefKey,
          };
          self.$modal.showLoading("加载中...");
          linkageService
            .nextFlowSelectPersonFlag(data)
            .then((res) => {
              self.$modal.hideLoading();
              if (res.success) {
                if (res.bean) {
                  self.hasChoosePeople();
                } else {
                  self.saveOrApproval();
                }
              } else {
                self.$u.toast(res.msg);
              }
            })
            .catch((err) => {
              self.$modal.hideLoading();
            });
        }
      });
    },
    hasChoosePeople() {
      let self = this;
      self.$u.route({
        url: "/pages/internal/linkage/components/flowUserList",
        params: {
          status: "2",
          gfCode: self.processDefKey,
          orgLevel: "0",
        },
      });
    },
    handleGoDetail() {
      let self = this;
      self.setRouteParam({ bizUuid: self.formAll.taskId || self.formAll.taskVo.id, status: "view" });
      self.$u.route({
        url: "/pages/internal/linkage/todo/inspectionArrangement",
        type: "to",
      });
    },
    handleUpdate(list) {
      if (list.length > 0) {
        this.fileList = [...list];
      } else {
        this.fileList = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 0;
}

.content {
  overflow: hidden;
  min-height: 100%;
  padding: 0 24rpx;
  background: #f5f5f5;
}
/deep/ .collapse-item-line {
  margin-top: 20rpx;
  position: relative;
  .u-collapse-item {
    background: white;
    padding: 0rpx 0rpx 20rpx;
    margin-bottom: 10px;
  }
  .u-collapse-head {
    padding-left: 30rpx;
  }
  .u-collapse-head::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 10px;
    background: #2979ff;
  }
  .u-collapse-title {
    padding-left: 5px;
  }
  .u-collapse-content {
    padding: 0px;
  }
  .u-form {
    padding: 0px 24px;
  }
  .none {
    margin-bottom: 100px;
  }
  .none.u-icon-wrap {
    display: none;
  }
}
.noImg {
  width: 150rpx;
  height: 150rpx;
}
/deep/ .u-numberbox {
  margin-bottom: 5px;
  .u-number-input {
    padding: 0px 10px;
  }
}
</style>
